<template>
	<view class="page">
		<view class="wrapper">
			<view class="userinfo">
				<view class="cu-avatar xl round margin-left avatar" :style="'background-image:url(' + userinfo.full_picture + ');'"></view>
				<view class="info">
					<view class="name">
						<view class="username" v-show="userinfo.nickname">{{userinfo.account}}</view>
						<view class="username" v-show="!userinfo.nickname" @click="goto('/pages/account/main')">点击登录</view>
						<view class='cu-tag radius tag' :class="'level'+userinfo.level+'-tag'">{{userinfo.level_name ? userinfo.level_name : '普通会员'}}</view>
					</view>
					<view class="text">
						<view class="uid">UID：{{userinfo.invite_code ? userinfo.invite_code : 'xxxxx'}}</view>
						<!-- #ifndef H5 -->
						<view class="copy" @click="copy">复制</view>
						<!-- #endif -->
					</view>
				</view>
			</view>

			<view class="cu-list menu">
				<view class="cu-item arrow none" @click="goto('/pages/mine/wallet')">
					<view class="content">
						<image src="/static/images/mine1.png" class="png" mode="aspectFit"></image>
						<text class="text-white text">钱包</text>
					</view>
				</view>
				<view class="cu-item arrow none" @click="share">
					<view class="content">
						<image src="/static/images/mine2.png" class="png" mode="aspectFit"></image>
						<text class="text-white text">分享</text>
					</view>
				</view>
				<view class="cu-item arrow" @click="goto('/pages/mine/msgList')">
					<view class="content">
						<image src="/static/images/mine3.png" class="png" mode="aspectFit"></image>
						<text class="text-white text">消息</text>
					</view>
				</view>
				<view class="cu-item arrow none" @click="goto('/pages/mine/community')">
					<view class="content">
						<image src="/static/images/mine5.png" class="png" mode="aspectFit"></image>
						<text class="text-white text">我的社区</text>
					</view>
				</view>
				<view class="cu-item arrow none" @click="goto('/pages/mine/profit')">
					<view class="content">
						<image src="/static/images/mine12.png" class="png" mode="aspectFit"></image>
						<text class="text-white text">收益详情</text>
					</view>
				</view>
				<view class="cu-item arrow" @click="goto()">
					<view class="content">
						<image src="/static/images/mine4.png" class="png" mode="aspectFit"></image>
						<text class="text-white text">云算力订单</text>
					</view>
				</view>
				<view class="cu-item arrow" @click="goto('/pages/shop/order')">
					<view class="content">
						<image src="/static/images/mine7.png" class="png" mode="aspectFit"></image>
						<text class="text-white text">我的订单</text>
					</view>
				</view>
				<view class="cu-item arrow" @click="goto('/pages/mine/address')">
					<view class="content">
						<image src="/static/images/mine8.png" class="png" mode="aspectFit"></image>
						<text class="text-white text">收货地址</text>
					</view>
				</view>
				<view class="cu-item arrow" @click="goto('/pages/account/safe')">
					<view class="content">
						<image src="/static/images/mine13.png" class="png" mode="aspectFit"></image>
						<text class="text-white text">账号安全</text>
					</view>
				</view>
				<view class="cu-item arrow" @click="goto('/pages/mine/level')">
					<view class="content">
						<image src="/static/images/mine11.png" class="png" mode="aspectFit"></image>
						<text class="text-white text">关于等级</text>
					</view>
				</view>
				<view class="cu-item arrow" @click="goto('/pages/mine/update')">
					<view class="content">
						<image src="/static/images/mine9.png" class="png" mode="aspectFit"></image>
						<text class="text-white text">检查更新</text>
					</view>
				</view>
				<view class="cu-item arrow" @click="logout">
					<view class="content">
						<image src="/static/images/mine10.png" class="png" mode="aspectFit"></image>
						<text class="text-white text">退出登录</text>
					</view>
				</view>
			</view>
		</view>


		<!-- 分享图片 -->
		<view class="cu-modal" :class="modalName=='shareModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog">
				<view class="bg-img" :style="'background-image:url(' + shareImg + ');height: 60vh;background-size: contain;'">
					<view class="cu-bar justify-end text-white">
						<view class="action" @tap="hideModal">
							<text class="cuIcon-close "></text>
						</view>
					</view>
				</view>
				<view class="cu-bar bg-white">
					<view class="action margin-0 flex-sub  solid-left" @tap="download">保存到本地</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import store from '@/store.js'
	export default {
		data() {
			return {
				downloadurl: '',
				modalName: '',
				shareImg: ''
			}
		},
		computed: {
			userinfo: state => store.state.userinfo,
			uid: state => store.state.userinfo.invite_code
		},
		onLoad() {

		},
		onShow() {
			this.getUserInfo();
		},
		methods: {
			showShareModal(e) {
				this.modalName = 'shareModal'
			},
			hideModal(e) {
				this.modalName = null
			},
			getUserInfo() {
				this.$u.get('member/info').then(res => {
					let userinfo = res.data.result.userinfo
					this.$store.commit('userLogin', userinfo)
				})
			},
			goto(path) {
				if (path) {
					uni.navigateTo({
						url: path,
						animationType: 'slide-in-right',
						animationDuration: 300
					})
				} else {
					uni.showToast({
						title: '暂未开放，敬请期待。',
						icon: 'none'
					})
				}
			},
			copy() {
				uni.setClipboardData({
					data: this.uid,
					success: () => {
						uni.showToast({
							title: '复制成功',
							duration: 1000
						});
					}
				})
			},
			logout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: res => {
						if (res.confirm) {
							this.$u.post('passport/logout', {
								token: this.$store.state.token
							})
							this.$store.commit('userLogout')
							this.goto('/pages/account/main')
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			share() {
				uni.showLoading()
				setTimeout(function () {
					uni.hideLoading();
				}, 10000);
				
				this.$u.get('/member/share').then(res => {
					this.shareImg = res.data.result.share
					this.downloadurl = res.data.result.download
					uni.hideLoading();
					this.showShareModal();
				})
			},
			download() {
				// #ifdef H5
				console.log('h5')
				window.open(`https://supercloud.qidka.com/api/member/img/download?file_path=${this.downloadurl}`)
				// #endif
				
				// #ifndef H5
				console.log('not h5')
				uni.downloadFile({
					url: this.shareImg,
					success: res => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: res => {
								console.log('???')
								uni.showToast({
									"title":"保存成功",
									duration:2000
								})
							},
							fail: res => {
								console.log(res)
							}
						})
					}
				})
				// #endif
			},
		}
	}
</script>

<style scoped>
	@import "/colorui/main.css";
	@import "/colorui/icon.css";

	.userinfo {
		color: #fff;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		padding-bottom: 40rpx;
		border-bottom: 2rpx solid #434657;
	}

	.userinfo .avatar {
		margin-right: 26rpx;
	}

	.userinfo .name {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
	}

	.userinfo .tag {
		padding: 0 8rpx !important;
		margin-left: 30rpx;
	}

	.userinfo .text {
		display: flex;
		align-items: center;
	}

	.userinfo .copy {
		margin-left: 30rpx;
		text-decoration: underline;
	}

	.menu {
		padding-bottom: 100rpx;
	}

	.menu .text {
		margin-left: 30rpx;
	}

	.cu-item {
		background-color: transparent !important;
	}

	.cu-list.menu>.cu-item .content {
		display: flex;
		align-items: center;
	}

	.cu-list.menu>.cu-item.arrow::before {
		color: #fff;
	}

	.arrow:active {
		background-color: #659F21 !important;
	}

	.arrow.none::after {
		border-bottom: none !important;
	}
</style>
